<template>
    <el-container :id="foldState ? 'hideSidebar' : ''">
        <div class="el-aside sidebar-container">
            <SideBar />
        </div>
        <el-container class="rightContainer">
            <el-header>
                <NavBar />
            </el-header>
            <el-main>
                <div class="mainContainer">
                    <slot name="main"></slot>
                </div>
            </el-main>
            <!-- <el-footer>Footer</el-footer> -->
        </el-container>
    </el-container>
</template>

<script lang="ts" setup>
import NavBar from '@/components/NavBar.vue';
import SideBar from '../components/SideBar.vue';
import { useMenuStore } from '@/stores/menu';
import { storeToRefs } from 'pinia';
const menuStore = useMenuStore()
const { foldState } = storeToRefs(menuStore)
</script>

<style lang="scss" scoped>
@import './CaLayout.scss';
</style>